<template>
  <div class="user-review-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="用户评价"
      left-arrow
      @click-left="handleGoBack"
    />

    <!-- 评价图片展示区域 -->
    <div class="product-banner">
      <van-image
        :src="reviewData.imageUrl || 'https://picsum.photos/600/800?random=1'"
        fit="cover"
        class="product-img"
      >
        <template #top-right>
          <div class="score-badge">
            <van-icon name="star" size="16" color="#FFC107" />
            <span class="score-text">{{ reviewData.score || 5 }}</span>
          </div>
        </template>
      </van-image>
    </div>

    <!-- 用户评价区域 -->
    <div class="review-content">
      <div class="user-info">
        <div class="user-avatar-placeholder">
          <van-icon name="user-o" size="24" color="#999" />
        </div>
        <div class="user-detail">
          <p class="user-phone">{{ reviewData.phone || '***********' }}</p>
          <p class="user-region">{{ reviewData.city || '未知城市' }}</p>
        </div>
        <van-button icon="share-o" type="text" class="share-btn">分享</van-button>
      </div>
      <van-rate :model-value="reviewData.score || 5" color="#FFC107" readonly />
      <div class="review-tags">
        <van-tag type="default" round class="tag-item">礼貌热情</van-tag>
        <van-tag type="default" round class="tag-item">快速完工</van-tag>
        <van-tag type="default" round class="tag-item">认真负责</van-tag>
        <van-tag type="default" round class="tag-item">按时上门</van-tag>
      </div>
      <p class="review-text">{{ reviewData.title || '用户评价' }}</p>
      <p class="review-time">{{ formatTime(reviewData.createTime) || '刚刚' }}</p>
    </div>

    <!-- 同款服务推荐 -->
    <div class="service-recommend">
      <van-image
        src="https://picsum.photos/100/100?random=2"
        class="service-img"
      />
      <p class="service-name">柜类维修</p>
      <van-button type="primary" round class="experience-btn" @click="goToCabinetRepair">体验同款服务</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NavBar, Image, Rate, Tag, Button, Icon } from 'vant';

const route = useRoute();
const router = useRouter();

// 评价数据
const reviewData = ref({
  id: '',
  title: '',
  score: 5,
  city: '',
  phone: '',
  userName: '',
  createTime: '',
  imageUrl: ''
});

// 从路由参数获取评价数据
onMounted(() => {
  const query = route.query;
  reviewData.value = {
    id: query.id || '',
    title: query.title || '用户评价',
    score: parseInt(query.score) || 5,
    city: query.city || '未知城市',
    phone: query.phone || '***********',
    userName: query.userName || '用户',
    createTime: query.createTime || '',
    imageUrl: query.imageUrl || ''
  };
  
  console.log('评价详情页接收到的数据:', reviewData.value);
});

// 格式化时间显示
const formatTime = (timeStr) => {
  if (!timeStr) return '刚刚';
  try {
    const date = new Date(timeStr);
    const now = new Date();
    const diffMs = now - date;
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffDays = Math.floor(diffHours / 24);
    
    if (diffDays > 0) {
      return `${diffDays}天前`;
    } else if (diffHours > 0) {
      return `${diffHours}小时前`;
    } else {
      return '刚刚';
    }
  } catch (e) {
    return '刚刚';
  }
};

// 返回上一页
const handleGoBack = () => {
  router.back();
};

// 跳转到柜类维修页面
const goToCabinetRepair = () => {
  console.log('跳转到柜类维修页面');
  router.push({ name: 'cabinetrepair' });
};
</script>

<style scoped>
.user-review-page {
  background-color: #fff;
  min-height: 100vh;
}

/* 商品展示区域样式 */
.product-banner {
  position: relative;
  margin: 10px 0;
}

.product-img {
  width: 100%;
}

.banner-tag {
  position: absolute;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
}

.red-tag {
  background-color: #f00;
}

.purple-tag {
  background-color: #9c27b0;
}

.yellow-tag {
  background-color: #ffeb3b;
  color: #333;
}

.score-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.score-text {
  font-size: 14px;
  font-weight: 600;
  color: #FFC107;
}

/* 用户评价区域样式 */
.review-content {
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.user-avatar-placeholder {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
}

.user-detail {
  flex: 1;
}

.user-phone {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.user-region {
  font-size: 14px;
  color: #999;
}

.share-btn {
  padding: 0;
}

.van-rate {
  margin-bottom: 12px;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag-item {
  background-color: #f5f5f5;
  color: #666;
}

.review-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.review-time {
  font-size: 14px;
  color: #999;
  text-align: right;
}

/* 同款服务推荐样式 */
.service-recommend {
  display: flex;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #eee;
}

.service-img {
  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.service-name {
  font-size: 16px;
  flex: 1;
}

.experience-btn {
  width: 180px;
}
</style>